<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="40%"
      :lock-scroll="false"
      v-dialogDrag
      :before-close="close"
      append-to-body
    >
      <el-form
        ref="ruleFormRef"
        :inline="true"
        v-model="fileUpload"
        :label-width="allData.labelWidth"
        width="160px"
      >
        <el-form-item :label="allData.label" prop="name">
          <el-input
            v-model="fileUpload.name"
            clearable
            autocomplete="off"
            :placeholder="allData.placeholderString"
            disabled
          />
        </el-form-item>
        <el-form-item>
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            action="#"
            :limit="1"
            :on-change="handleChange"
            :auto-upload="false"
            :show-file-list="false"
            :on-exceed="handleExceed"
            :accept="allData.accept"
          >
            <template #trigger>
              <el-button type="primary">选择文件</el-button>
            </template>
          </el-upload>
        </el-form-item>
        <div v-if="allData.ifDownload" class="download-file">
          <el-button type="text" @click="download">
            {{ allData.downloadText }}
          </el-button>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="close">取消</el-button>
        <el-button
          :loading="loading"
          size="small"
          type="primary"
          :disabled="!fileUpload.name"
          @click="save"
        >
          导入
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "上传文件",
    },
    isChangeUpload: {
      type: Boolean,
      default: false,
    },
    importData: {
      type: Object,
      default: () => {},
    },
    isAccept: {
      type: Boolean,
      default: false,
    },
    allData: {
      type: Object,
      default: () => {
        return {
          placeholderString: "选择导入文件",
          labelWidth: "120px",
          downloadText: "下载模板",
          ifDownload: false,
          accept: "",
        };
      },
    },
  },
  data() {
    return {
      dialogVisible: true,
      loading: false,
      fileUpload: {},
      fileList: [],
    };
  },
  methods: {
    download() {
      this.$emit("download");
    },
    isCanUpload(file) {
      let array = this.allData.accept;
      let fileEnd = file.name.substring(file.name.lastIndexOf("."));
      if (array.includes(fileEnd)) {
        this.fileUpload = file?.raw ?? file;
        if (this.isChangeUpload) {
          this.$emit("handleChange", this.fileUpload);
        }
      } else {
        this.$message.warning("不支持此格式文件");
      }
    },
    handleChange(file) {
      if (this.isAccept) {
        this.isCanUpload(file);
      } else {
        this.fileUpload = file.raw;
      }
      // this.fileUpload = file.raw
      // if (this.isChangeUpload) {
      //   this.$emit('handleChange', this.fileUpload)
      // }
    },
    // 多次上传覆盖
    handleExceed(file) {
      this.$refs.uploadRef.clearFiles();
      if (this.isAccept) {
        this.isCanUpload(file[0]);
      } else {
        this.fileUpload = file[0];
      }
      // this.fileUpload = file[0]
      // if (this.isChangeUpload) {
      //   this.$emit('handleChange', this.fileUpload)
      // }
    },
    // 多文件上传
    handleChangeList(file, fileList) {
      this.fileList = fileList;
    },
    //删除
    handleRemove(file, fileList) {
      console.log("file", fileList);
      this.fileList = fileList;
    },
    handleExceedList(file, fileList) {
      this.$refs.uploadRef.clearFiles();
      this.fileList = fileList;
    },
    close() {
      this.fileUpload = {};
      this.fileList = [];
      this.loading = false;
      this.$emit("closeDialog");
    },
    save() {
      this.$emit("importFileFun", this.fileUpload);
    },
    saveList() {
      this.$emit("importFileFun", this.fileList);
    },
    changeLoading() {
      this.loading = !this.loading;
    },
  },
};
</script>

<style lang="less" scoped>
.dialog-footer {
  text-align: center;
}

:deep(.el-form-item--medium) {
  width: 100% !important;
}
</style>
